<template>
  <div class="address-set">
    <el-form class="address-set__form"
             label-position="top"
             :model="form"
             :rules="rules"
             @submit.native.prevent="doSave({action: actionName, form: 'form'})"
             ref="form"
             :disabled="loading"
    >
      <el-form-item label="收货人：" prop="name">
        <el-input class="address-set__item-input" v-model="form.name" placeholder="请输入收货人姓名" />
      </el-form-item>
      <el-form-item label="手机号码：" prop="mobile">
        <el-input class="address-set__item-input" v-model="form.mobile" placeholder="请输入收货人手机号码" />
      </el-form-item>
      <el-form-item label="所在地区：">
        <div class="address-set__select-group">
          <el-form-item class="address-set__select_margin_r20" prop="provinceId">
            <div class="address-select__cell">
              <el-select v-model="form.provinceId" placeholder="请选择所在省会">
                <el-option
                  v-for="province in provinceList"
                  :key="province.id"
                  :label="province.name"
                  :value="province.id">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item class="address-set__select_margin_r20" prop="cityId">
            <div class="address-select__cell">
              <el-select v-model="form.cityId" placeholder="请选择所在城市">
                <el-option
                  v-for="city in cityList"
                  :key="city.id"
                  :label="city.name"
                  :value="city.id">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item prop="areaId">
            <div class="address-select__cell">
              <el-select v-model="form.areaId" placeholder="请选择所在地区">
                <el-option
                  v-for="area in areaList"
                  :key="area.id"
                  :label="area.name"
                  :value="area.id">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
        </div>
      </el-form-item>
      <el-form-item label="详细地址：" prop="street">
        <el-input v-model="form.street" placeholder="请输入详细地址" />
      </el-form-item>
      <el-form-item align="center" no-spacing="">
        <el-button type="primary" native-type="submit">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {factory, form, addressSelect} from '@/build';

  import {
    addressAddApi as addApi,
    addressUpdateApi as updateApi
  } from '@/services/api/address';

  export default {
    name: "address-set",

    mixins: [form, addressSelect],

    inject: ['setDialogHeader'],

    props: ['info'],

    data() {
      return {
        actionName: this.info.id ? 'update' : 'add',
        form: {
          id: this.info.id,
          name: this.info.name,
          mobile: this.info.mobile,
          provinceId: undefined,
          cityId: undefined,
          areaId: undefined,
          status: this.info.status,
          street: this.info.street,
        },
        rules: {
          name: factory.getRule('reallyName', {
            required: true
          }),
          mobile: factory.getRule('mobile'),
          street: [
            {required: true, message: '请输入详细地址'}
          ]
        },
      };
    },

    watch: {
      provinceList(currentList) {
        if (this.info.province && currentList.length) {
          this.form.provinceId = _.find(currentList, {name: this.info.province}).id;
        }
      },
      cityList(currentList) {
        if (this.info.city && currentList.length) {
          this.form.cityId = _.find(currentList, {name: this.info.city}).id;
        }
      },
      areaList(currentList) {
        if (this.info.area && currentList.length) {
          this.form.areaId = _.find(currentList, {name: this.info.area}).id;
        } else if (this.info.city && !this.info.area) {
          this.form.areaId = -1;
        }
      },
    },

    computed: {
      ...mapState({
        user: state => state.user
      })
    },

    created() {
      this.setDialogHeader(`${this.actionName === 'add' ? '新建' : '编辑'}收货地址`);
    },

    mounted() {
      this.bindSave(addApi, 'add', 'form', {
        successMessage: '新增收货地址成功',
        afterSuccess: () => {
          this.$store.dispatch(types.OAUTH);
          this.$emit('on-success');
        }
      });

      this.bindSave(updateApi, 'update', 'form', {
        successMessage: '修改收货地址成功',
        afterSuccess: () => {
          this.$store.dispatch(types.OAUTH);
          this.$emit('on-success');
        }
      });

    }
  };
</script>

<style lang="scss" scoped>
  @include b(address-set) {
    width: 705px;
    margin: 0 auto;
    @include e(item-input) {
      width: 380px;
    }
    .el-button {
      width: 410px;
    }

    @include e(select-group) {
      display: flex;
      flex: 1 0 0;
      justify-content: space-between;
    }
  }

  .address-set__select_margin_r20{margin-right:20px;}
</style>